<template>
  <view style="display: flex; flex-direction: column;  padding: 40rpx;">
    <view class="feedback-input">
      <!-- 将 u--textarea 替换为 up-textarea -->
      <up-textarea
        :height="200"
        v-model="feedbackText"
        placeholder="您的建议帮助我们做的更好"
        :focus="true"
        :maxlength="200"
        confirmType="send"
        count
      ></up-textarea>
    </view>
    <view style="padding: 20rpx;">
      <!-- 将 u-text 替换为 up-text -->
      <up-text color="#676f74" text="请留下您的联系方式"></up-text>
      <!-- 添加联系方式输入框 -->
      <up-input
        placeholder="请输入您的联系方式"
        border="none"
        v-model="contactInfo"
      ></up-input>
    </view>
    <view style="margin-top: 100rpx;">
      <!-- 将 u-button 替换为 up-button -->
      <up-button style="opacity: 0.7;" text="提交反馈" type="primary" @click="feedback"></up-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; // 引入 useStore 函数

// 定义反馈文本的响应式变量
const feedbackText = ref<string>('');
// 定义联系方式的响应式变量
const contactInfo = ref<string>('');
const store = useStore(); // 使用 useStore 函数获取 store 实例

// 定义提交反馈的方法
const feedback = () => {
  // 此处应该连接后端
  console.log(`反馈内容: ${feedbackText.value}, 联系方式: ${contactInfo.value}`);
  // 示例：如果需要调用 vuex action
  // store.dispatch('someAction', { feedbackText: feedbackText.value, contactInfo: contactInfo.value });
};
</script>

<style lang="scss" scoped>

</style>